<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<input 
				type="text" 
				v-model="searchKey" 
				placeholder="搜索IP、作品、商品" 
				@input="onSearch"
			/>
		</view>
		
		<!-- 站点选择 -->
		<view class="waterfall-wrapper">
			<view class="waterfall-column">
				<view 
					class="site-item" 
					v-for="(item, index) in leftSiteList" 
					:key="index"
					@tap="goSite(item)"
				>
					<view class="site-image">
						<image :src="item.image" mode="widthFix"></image>
					</view>
					<view class="site-info">
						<text class="name">{{item.name}}</text>
						<text class="desc">{{item.desc}}</text>
					</view>
				</view>
			</view>
			<view class="waterfall-column">
				<view 
					class="site-item" 
					v-for="(item, index) in rightSiteList" 
					:key="index"
					@tap="goSite(item)"
				>
					<view class="site-image">
						<image :src="item.image" mode="widthFix"></image>
					</view>
					<view class="site-info">
						<text class="name">{{item.name}}</text>
						<text class="desc">{{item.desc}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- IP分类 -->
		<view class="category-section" v-if="currentSite">
			<view class="section-title">
				<text class="title">热门IP</text>
				<text class="subtitle">精选{{currentSite.name}}相关IP</text>
			</view>
			<view class="search-result" v-if="searchKey">
				<view class="result-title">搜索结果</view>
				<view class="category-list">
					<view 
						class="category-item" 
						v-for="(item, index) in filteredCategories" 
						:key="index"
						@tap="goCategory(item)"
					>
						<view class="icon-wrapper">
							<image :src="item.icon" mode="aspectFit"></image>
							<view class="icon-bg"></view>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="category-list" v-else>
				<view 
					class="category-item" 
					v-for="(item, index) in currentSite.categories" 
					:key="index"
					@tap="goCategory(item)"
				>
					<view class="icon-wrapper">
						<image :src="item.icon" mode="aspectFit"></image>
						<view class="icon-bg"></view>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				siteId: null,
				searchKey: '',
				searchTimer: null,
				siteList: [
					{
						id: 1,
						name: '一次元',
						desc: '漫画、轻小说、画集等',
						image: '/static/site/manga.jpg',
						categories: [
							{ name: '鬼灭之刃', icon: '/static/ip/kimetsu.png', id: 1 },
							{ name: '咒术回战', icon: '/static/ip/jujutsu.png', id: 2 },
							{ name: '海贼王', icon: '/static/ip/onepiece.png', id: 3 },
							{ name: '进击的巨人', icon: '/static/ip/titan.png', id: 4 }
						]
					},
					{
						id: 2,
						name: '二次元',
						desc: '手办、模型、周边等',
						image: '/static/site/anime.jpg',
						categories: [
							{ name: 'Fate系列', icon: '/static/ip/fate.png', id: 5 },
							{ name: '初音未来', icon: '/static/ip/miku.png', id: 6 },
							{ name: '东方Project', icon: '/static/ip/touhou.png', id: 7 },
							{ name: 'EVA', icon: '/static/ip/eva.png', id: 8 }
						]
					},
					{
						id: 3,
						name: '三次元',
						desc: '明星、演唱会、影视等',
						image: '/static/site/star.jpg',
						categories: [
							{ name: '周杰伦', icon: '/static/ip/jay.png', id: 9 },
							{ name: '五月天', icon: '/static/ip/mayday.png', id: 10 },
							{ name: '漫威英雄', icon: '/static/ip/marvel.png', id: 11 },
							{ name: 'DC英雄', icon: '/static/ip/dc.png', id: 12 }
						]
					},
					{
						id: 4,
						name: '二手交易',
						desc: '二手手办、漫画、周边等',
						image: '/static/site/used.jpg',
						categories: [
							{ name: '手办专区', icon: '/static/ip/used-figure.png', id: 13 },
							{ name: '漫画专区', icon: '/static/ip/used-manga.png', id: 14 },
							{ name: '周边专区', icon: '/static/ip/used-goods.png', id: 15 },
							{ name: '限定专区', icon: '/static/ip/used-limited.png', id: 16 }
						]
					}
				]
			}
		},
		computed: {
			currentSite() {
				return this.siteList.find(item => item.id === this.siteId)
			},
			leftSiteList() {
				return this.siteList.filter((_, index) => index % 2 === 0)
			},
			rightSiteList() {
				return this.siteList.filter((_, index) => index % 2 === 1)
			},
			filteredCategories() {
				if (!this.currentSite || !this.searchKey) return []
				return this.currentSite.categories.filter(item => 
					item.name.toLowerCase().includes(this.searchKey.toLowerCase())
				)
			}
		},
		onLoad(options) {
			if (options.id) {
				this.siteId = parseInt(options.id)
			}
		},
		methods: {
			debounce(func, wait) {
				if (this.searchTimer) {
					clearTimeout(this.searchTimer)
				}
				
				this.searchTimer = setTimeout(() => {
					func()
				}, wait)
			},
			onSearch() {
				this.debounce(() => {
					console.log('搜索关键词：', this.searchKey)
				}, 300)
			},
			goSite(item) {
				this.siteId = item.id
				this.searchKey = ''
			},
			goCategory(item) {
				uni.navigateTo({
					url: `/pages/site/category/list?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx;
		background: #f5f5f5;
		min-height: 100vh;
	}
	
	.search-bar {
		background: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		
		input {
			width: 100%;
			height: 72rpx;
			background: #f5f5f5;
			border-radius: 36rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			color: #333;
			
			&::placeholder {
				color: #999;
			}
		}
	}
	
	.waterfall-wrapper {
		display: flex;
		justify-content: space-between;
		margin: 0 -10rpx;
		
		.waterfall-column {
			flex: 1;
			padding: 0 10rpx;
		}
	}
	
	.site-item {
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
		
		&:active {
			transform: scale(0.98);
		}
		
		.site-image {
			position: relative;
			width: 100%;
			
			image {
				width: 100%;
				height: auto;
				display: block;
			}
		}
		
		.site-info {
			padding: 20rpx;
			
			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
				display: block;
			}
			
			.desc {
				font-size: 24rpx;
				color: #999;
				line-height: 1.5;
			}
		}
	}
	
	.category-section {
		background: #fff;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.section-title {
			margin-bottom: 30rpx;
			
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 8rpx;
				display: block;
			}
			
			.subtitle {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.search-result {
			.result-title {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 20rpx;
			}
		}
		
		.category-list {
			display: flex;
			flex-wrap: wrap;
			margin: 0 -10rpx;
			
			.category-item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 30rpx;
				padding: 0 10rpx;
				
				.icon-wrapper {
					position: relative;
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 12rpx;
					
					image {
						width: 100%;
						height: 100%;
						position: relative;
						z-index: 2;
					}
					
					.icon-bg {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 80rpx;
						height: 80rpx;
						background: rgba(255, 0, 0, 0.1);
						border-radius: 50%;
						z-index: 1;
					}
				}
				
				text {
					font-size: 24rpx;
					color: #333;
					text-align: center;
				}
			}
		}
	}
</style> 